<ng-container *transloco="let t; read:'change-email'">
  <div class="card mt-2">
    <div class="card-body">
      <div class="card-title">
        <div class="container-fluid row mb-2">
          <div class="col-10 col-sm-11">
            <h4 id="email-card">{{t('email-label')}}
              <ng-container *ngIf="!emailConfirmed">
                <i class="fa-solid fa-circle ms-1 confirm-icon" aria-hidden="true" [ngbTooltip]="t('email-not-confirmed')"></i>
                <span class="visually-hidden">{{t('email-not-confirmed')}}</span>
              </ng-container>
            </h4>
          </div>
          <div class="col-1 text-end">
            <button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode ? 'Edit' : 'Cancel'}}</button>
          </div>
        </div>
      </div>

      <ng-container *ngIf="isViewMode">
        <div class="container-fluid row">
          <span class="col-12">{{user?.email}}</span>
        </div>
      </ng-container>

      <div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">
        <ng-container>
          <div class="alert alert-danger" role="alert" *ngIf="errors.length > 0">
            <div *ngFor="let error of errors">{{error}}</div>
          </div>
          <form [formGroup]="form">
            <div class="mb-3">
              <label for="email" class="form-label visually-hidden">{{t('email-label')}}</label>
              <input class="form-control custom-input" type="email" id="email" formControlName="email"
                     [class.is-invalid]="form.get('email')?.invalid && form.get('email')?.touched">
              <div id="email-validations" class="invalid-feedback" *ngIf="form.dirty || form.touched">
                <div *ngIf="form.get('email')?.errors?.required">
                  {{t('required-field')}}
                </div>
              </div>
            </div>

            <div class="mb-3">
              <label for="password" class="form-label">{{t('current-password-label')}}</label>
              <input class="form-control custom-input" type="password" id="password" formControlName="password"
                     [class.is-invalid]="form.get('password')?.invalid && form.get('password')?.touched">
              <div id="password-validations" class="invalid-feedback" *ngIf="form.dirty || form.touched">
                <div *ngIf="form.get('password')?.errors?.required">
                  {{t('required-field')}}
                </div>
              </div>
            </div>

            <div class="col-auto d-flex d-md-block justify-content-sm-center text-md-end mb-3">
              <button type="button" class="flex-fill btn btn-secondary me-2" aria-describedby="email-card" (click)="resetForm()">{{t('reset')}}</button>
              <button type="submit" class="flex-fill btn btn-primary" aria-describedby="email-card" (click)="saveForm()" [disabled]="!form.valid || !(form.dirty || form.touched)">{{t('save')}}</button>
            </div>
          </form>
        </ng-container>

        <ng-container *ngIf="emailLink !== ''">
          <h4>{{t('email-updated-title')}}</h4>
          <p>{{t('email-updated-description')}}</p>
          <a class="email-link" href="{{emailLink}}" target="_blank" rel="noopener noreferrer">{{t('setup-user-account')}}</a>
          <app-api-key [title]="t('invite-url-label')" [tooltipText]="t('invite-url-tooltip')" [hideData]="false" [showRefresh]="false" [transform]="makeLink"></app-api-key>
        </ng-container>

        <ng-template #noPermission>
          <p>{{t('permission-error')}}</p>
        </ng-template>
      </div>


    </div>


  </div>


</ng-container>
